<template>
  <div>
    <!-- 三元绑定 -->
    <p :class="bool ? 'active' : '?'">哈哈哈1</p>
    <!-- 对象绑定 -->
    <p :class="{ active: bool }">hahah2</p>
    <!-- 静态绑定和动态绑定,两者可以共存, -->
    <p class="item" :class="{ active: bool }">哈哈哈3</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
const bool = ref(false);
</script>

<style scoped>
.active {
  color: red;
}
</style>
